<template>
  <div class="date">
    <!-- 星期 -->
    <el-row class="week">
      <div class="float-div" v-for="week in weeks" :key="week">{{ week }}</div>
    </el-row>

    <!-- 日期 -->
    <el-row class="days">
      <div @click="pick(day)" v-for="(day, index) in days" :key="index">
        <div class="days-border">
          <!--其他-->
          <div v-if="day.getMonth() + 1 != currentMonth" class="other-month">
            {{ day.getDate() }}
          </div>
          <!--今天-->
          <div v-else>
            <div
              v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
              class="active">
              {{ day.getDate() }}
            </div>
            <!--本月-->
            <div v-else>
              {{ day.getDate() }}
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
  export default {
    props: {
      currentDate: String,
    },
    data() {
      return {
        activeState: true,
        currentYear: 1970,
        currentMonth: 1,
        currentDay: 1,
        currentWeek: 1,
        days: [],
        weeks: ["一", "二", "三", "四", "五", "六", "日"],
        behindDate: "",
        frontDate: "",
      };
    },
    mounted() {},
    created() {
      this.initData(null);
      this.pick(new Date());
    },

    methods: {
      formatDate(year, month, day) {
        const y = year;
        let m = month;
        if (m < 10) m = `0${m}`;
        let d = day;
        if (d < 10) d = `0${d}`;
        return `${y}-${m}-${d}`;
      },
      initData(cur) {
        let date = "";
        if (cur) {
          date = new Date(cur);
        } else {
          date = new Date();
        }
        // 今日日期 几号
        this.currentDay = date.getDate();
        // 当前年份
        this.currentYear = date.getFullYear();
        // 当前月份
        this.currentMonth = date.getMonth() + 1;
        this.currentWeek = date.getDay();
        // 1...6,0  // 星期几
        if (this.currentWeek === 0) {
          this.currentWeek = 7;
        }
        const str = this.formatDate(
          this.currentYear,
          this.currentMonth,
          this.currentDay
        ); // 今日日期 年-月-日
        this.days.length = 0;
        // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
        /* eslint-disabled */
        for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
          const d = new Date(str);
          d.setDate(d.getDate() - i);
          this.days.push(d);
        }
        for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
          const d = new Date(str);
          d.setDate(d.getDate() + i);
          this.days.push(d);
        }
        this.behindDate = this.formatDate(
          this.days[0].getFullYear(),
          this.days[0].getMonth() + 1,
          this.days[0].getDate()
        );
        this.frontDate = this.formatDate(
          this.days[6].getFullYear(),
          this.days[6].getMonth() + 1,
          this.days[6].getDate()
        );
      },
      // 上个星期
      weekPre() {
        // 如果当期日期是7号或者小于7号
        const d = this.days[0];
        d.setDate(d.getDate() - 7);
        this.initData(d);
      },
      // 下个星期
      weekNext() {
        // 如果当期日期是7号或者小于7号
        const d = this.days[6];
        d.setDate(d.getDate() + 7);
        this.initData(d);
      },
      // 上一個月  传入当前年份和月份
      pickPre(year, month) {
        const d = new Date(this.formatDate(year, month, 1));
        d.setDate(0);
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      // 下一個月  传入当前年份和月份
      pickNext(year, month) {
        const d = new Date(this.formatDate(year, month, 1));
        d.setDate(35);
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      // 当前选择日期
      pick(date) {
        var currentDate = this.formatDate(
          date.getFullYear(),
          date.getMonth() + 1,
          date.getDate()
        );
        this.$emit("childEvent", currentDate);
      },
    },
  };
</script>
<style lang="scss">
  .date {
    margin-top: 1%;
    background-color: #f6f6f6;
    height: 10%;
    color: black;
    border-radius: 20px;

    .ivu-icon {
      cursor: pointer;
    }

    .month {
      font-size: 14px;
      text-align: center;
      margin-top: 20px;
      background: white;
    }

    .week {
      font-size: 14px;
      line-height: 35px;
      text-align: center;
      color: #333;
      margin-right: -2px;
    }

    .float-div {
      width: 14.28%;
      height: 10%;
      float: left;
    }

    .days-border {
      height: 35px;
      margin-right: -2px;
    }

    .days {
      display: flex;

      div {
        flex: 1;
        font-size: 16px;
        text-align: center;
        margin-top: 0px;
        line-height: 30px;

        :hover {
          display: inline-block;
          width: 30px;
          height: 30px;
          color: #ffffff;
          border-radius: 50%;
          background-color: cornflowerblue;
          text-align: center;
        }

        .active {
          display: inline-block;
          width: 30px;
          height: 30px;
          color: #ffffff;
          border-radius: 50%;
          background-color: cornflowerblue;
          text-align: center;
        }

        .other-month {
          font-size: 16px;
        }
      }
    }
  }
</style>